<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>搜索框模糊提示</title>
		<style type="text/css">
			body,
			ul {
				margin: 0;
			}
			
			ul {
				padding-left: 0;
				list-style: none;
				width: 300px;
				margin: 0 auto;
			}
			
			ul>li {
				width: 300px;
				height: 30px;
				background-color: darkgray;
				border-bottom: 1px solid lightgray;
				text-align: left;
				line-height: 30px;
				font-weight: bolder;
				font-size: 16px;
			}
			
			.tittle {
				background-color: gray;
			}
			
			.box {
				width: 500px;
				height: 500px;
				border: 1px solid;
				margin: 0 auto;
				text-align: center;
			}
			
			input {
				height: 30px;
				width: 300px;
				margin: 20px 0;
			}
		</style>
	</head>

	<body>
		<div id="box" class="box">
			<input type="text " name="" id="search" placeholder="搜索.." />
			<br />
			<ul>
				<li class="tittle">A</li>
				<li>Apple</li>
				<li>Application</li>
				<li class="tittle">B</li>
				<li>Box</li>
				<li>Bad</li>
				<li class="tittle">C</li>
				<li>Cat</li>
				<li>Cut</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var input = document.getElementById('search');
		var li = document.getElementsByTagName('li');
		var btn = document.getElementById('btn');
		//		松开键盘事件
		input.onkeyup = function() {
			hint();
		}

		function hint() {
			//			输入的内容都转换成大写
			var fillter = input.value.toUpperCase();
			//			遍历所有li的文本内容
			for(var i = 0; i < li.length; i++) {
				//				遍历的内容和输入内容对比
				//				indexOf()可以在数组也可以在用在字符串类型中，number中没有
				var r = li[i].innerHTML.toUpperCase().indexOf(fillter);
				if(r > -1) {
					li[i].style.display = 'block';
					//					上面也可以写成
					//					li[i].style.display = ''; 
				} else {
					li[i].style.display = 'none';
				}

			}
		}
	</script>

</html>